<template>
	<view class="content">
		<uni-forms-item label="场景值(scene)" name="scene">
			<uni-easyinput v-model="formData.scene" placeholder="请输入" />
		</uni-forms-item>
		<uni-captcha :scene="formData.scene" v-model="formData.captcha"></uni-captcha>
		<button @click="verifyCaptcha" class="btn" type="primary"><text>验证	</text></button>
		<uni-popup-captcha ref="popup-captcha" @confirm="verifyCaptcha" :scene="formData.scene" v-model="formData.captcha"></uni-popup-captcha>
		<button class="btn" @click="openPopupCaptcha" type="primary" plain><text>打开弹框式验证码</text></button>
		<view class="tips">
			<text>注意：uniappx 的 uvue 页面内无法渲染 svg 格式的验证码，如需要在 uvue 页面内正常显示验证码，请更改配置文件 /common/uni-config-center/uni-captcha/config.json 的 mode 的值为bmp</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					captcha:"",
					scene:"login"
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			verifyCaptcha(){
				const uniCaptchaDemo = uniCloud.importObject("uni-captcha-demo")
				uniCaptchaDemo.verify(this.formData).then(e=>{
					uni.showToast({
						title: e.errMsg,
						icon: 'none'
					});
				})
			},
			openPopupCaptcha(){
				this.$refs['popup-captcha'].open()
			}
		}
	}
</script>

<style>
	.content{
		padding: 15px;
	}
	.scene-box {
		display: flex;
	}
	.scene-box input{
		border: solid 1px #eee;
		padding: 5px;
	}
	.btn{
		margin-top: 15px;
	}
	.tips{
		margin-top: 10px;
		color: #999;
		font-size: 14px;
	}
</style>
